<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">

	</style>
</head>
<body>
	用户名： <input type="" name="">
	<p style="color: red;"></p>
	<select>
		<option value="wzry">王子</option>
		<option value="hpjy">和平</option>
		<option value="ys">原神</option>
		<option value="hyrz">火影</option>
	</select>
	<script type="text/javascript">
		let inp = document.querySelector('input')
		let p = document.querySelector('p')
		let select = document.querySelector('select')
		//表单失去焦点
		inp.onblur = function() {
			if (!this.value) {
				p.innerText = "用户不能为空"
			}else if(this.value.length < 5){
				p.innerText = "用户名不能小于5位数"
			}
		}








		//表单获取焦点
		inp.onfocus = function() {

		}
		// 表单值改变的时候 select input 
		inp.onchange = function() {
			console.log('我改变了')
		}

		select.onchange = function() {
			console.log("选项更让该", this.value)
		}
	</script>
</body>
</html>